<template>
  <view class="greeting-card">
	<view class="greeting">
		<text class="greeting-text">{{greetingMessage}}</text>
		<text class="greeting-text">Prista fallbless</text>
	</view>
	<view class="date-info">
	  <text class="date-text">{{ formattedDate }}</text>
	</view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const greetingMessage = ref('');
const currentDate = ref(new Date());
const formattedDate = ref('');
const weekday = ref('');

const updateGreetingAndDate = () => {
  const hours = currentDate.value.getHours();
  if (hours < 12) {
	greetingMessage.value = '早上好！';
  } else if (hours < 18) {
	greetingMessage.value = '下午好！';
  } else {
	greetingMessage.value = '晚上好！';
  }

  const options = {
	year: 'numeric',
	month: 'long',
	day: 'numeric',
  };
	formattedDate.value = currentDate.value.toLocaleDateString(undefined, options);
};

onMounted(() => {
  updateGreetingAndDate();
});
</script>

<style scoped>
.greeting-card {
  padding: 40rpx; /* Adjusted padding for better responsiveness */
  background-color: white;
  text-align: center;
  border-radius: 20rpx; /* Adjusted border-radius for better responsiveness */
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); /* Adjusted box-shadow for better responsiveness */
  width: 100%; /* Ensuring the card takes the full width of its container */
  box-sizing: border-box; /* Ensuring padding is included in the element's total width and height */
  margin-bottom: 10rpx;
}

.greeting {
  margin-bottom: 5rpx; /* Adjusted margin for better responsiveness */
  font-size: 48rpx; /* Adjusted font-size for better responsiveness */
  color: black;
}

.greeting-text {
	font-size: 50rpx;
	margin-bottom: 10rpx;
}

.date-info {
  font-size: 36rpx; 
  color: rgb(138, 131, 125);
  align-items:flex-end;
}

.date-text {
  margin-bottom: 10rpx;
}

.day-text {
  margin: 0;
}
</style>